<template>
  <div class="List_main">
    <el-button type="danger" plain @click="createMarkers"
      >点击生成标记点</el-button
    >
    <!-- 条件判断--是否有数据 -->
    <ul v-if="items.length == 0">
      <li>暂无点标记</li>
    </ul>
    <ul v-else>
      <li
        v-for="(item, index) in itemData"
        :key="index"
        @click="sendMarkers(item)"
        class="oli"
      >
        <p>点标记{{ item.id }}：</p>
        {{ item.place }}
      </li>
    </ul>
    <!-- 分页 -->
    <div v-if="items.length != 0">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="5"
        layout=" prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      itemData: [],
      total: 500,
      currentPage: 1,
    };
  },
  watch: {
    items(val) {
      this.total = val.length;
    },
  },
  computed: {
    ...mapState(["items"]),
  },
  methods: {
    ...mapMutations(["setMarkerList", "setNewCneterIP", "setLastItems"]),
    /**
     * 随机生成500个坐标
     */
    createMarkers() {
      let arr = [];
      for (let i = 0; i < 500; i++) {
        arr.push({
          id: i,
          place: [
            (Math.random() * 360 - 180).toFixed(2),
            (Math.random() * 170 - 85).toFixed(2),
          ],
        });
      }
      this.setLastItems(arr);
      this.itemData = this.items.slice(0, 5);
      this.setMarkerList(arr);
    },
    /**
     * 当前点击的坐标
     */
    sendMarkers(item) {
      this.setNewCneterIP(item.place);
    },
    /**
     * 页码切换
     */
    handleCurrentChange(val) {
      this.itemData = this.items.slice(5 * (val - 1), 5 * val);
    },
  },
};
</script>

<style scoped>
.List_main {
  width: 100%;
  text-align: center;
}
ul {
  width: 100%;
  height: 380px;
  overflow: auto;
  list-style: none;
  padding: 10px;
  margin: 6px 0;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
li {
  width: 100%;
  padding: 8px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.5);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
li p {
  width: 120px;
}
.oli:hover {
  background-color: beige;
  border-bottom: 1px solid white;
}
.oli:last-child {
  border-bottom: 1px solid white;
}
</style>